import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-video-image',
  templateUrl: './video-image.component.html',
  styleUrls: ['./video-image.component.scss'],
})
export class VideoImageComponent implements OnInit {

  @Input() tagData;
  imgTagData = {
    images: [],
    data: {},
    cssStyle: '',
    download: false
  };
  checkVideo = false;
  checkImage = false;
  isShowBtn = false;
  videoSrc: any;
  constructor() { }
  cssType = '0';
  boxCssStyle: any;
  updateVideo: any;
  videoCssStyle: any;
  ngOnInit() {
    // this.isShowBtn = true;
    let hasVideoCount = 0;
    let hasImageCount = 0;

    // this.tagData.data[0].urls[0] = 'http://oss-ppw.pupuwang.com/video_d38e3bf3a8999aebca8331b01b509d55.mp4';
    this.tagData.data.forEach(element => {

      if (element.type === 'video' && element.urls.length > 0 && element.urls[0] !== "") {
        if (element.cssType !== undefined) {
          this.cssType = element.cssType;
        }

        if (element.cssStyle !== undefined) {
          this.videoCssStyle = element.cssStyle;
        }
        this.checkVideo = element.checked === 'true' ? true : false;
        hasVideoCount = 1;
        this.videoSrc = element.urls[0] + '#t=1';
      } else if (element.type === 'image' && element.urls.length > 0) {
        if (element.cssType !== undefined) {
          this.cssType = element.cssType;
        }
        hasImageCount = 1;
        this.checkImage = element.checked === 'true' ? true : false;
        try {
          this.imgTagData.images = element.urls;
          this.imgTagData.data = element;
          this.imgTagData.cssStyle = element.cssStyle;
          this.imgTagData.download = element.download;

        } catch (error) {
          hasImageCount = 0;
          this.imgTagData.images = [];
          this.imgTagData.data = {};
        }
      } else if (!this.imgTagData.images.length && !element.urls.length && !this.videoSrc) {
        if (element.cssType !== undefined) {
          this.cssType = element.cssType;
        }
        hasImageCount = 1;
        this.checkImage = element.checked === 'true' ? true : false;
        try {
          this.imgTagData.data = element;
          this.imgTagData.cssStyle = element.cssStyle;
          this.imgTagData.download = element.download;
          this.imgTagData.images = [''];
        } catch (error) {
          hasImageCount = 0;
          this.imgTagData.images = [];
          this.imgTagData.data = {};
        }
      }

      // 1.6.8 新增参数
      if (element.boxCssStyle !== undefined) {
        this.boxCssStyle = element.boxCssStyle;
      }
      console.log('updateVideo:' + this.updateVideo);
      // 1.7.1 新增参数
      if (element.updateVideo !== undefined) {
        this.updateVideo = element.updateVideo;
      }
    });

    if (hasVideoCount > 0 && hasImageCount > 0) {
      this.isShowBtn = true;
    } else if (hasVideoCount === 0 && hasImageCount > 0) {
      this.checkImage = true;
    } else if (hasVideoCount > 0 && hasImageCount === 0) {
      this.checkVideo = true;
    } else if (hasVideoCount === 0 && hasImageCount === 0) {
      this.checkImage = true;
    }
  }

  segmentChanged(ev: any) {
    console.log('Segment changed', ev);
  }

  toggle(toggleButton, index) {
    this.checkVideo = !this.checkVideo;
    this.checkImage = !this.checkImage;
    // if (toggleButton[index].checked) {
    //   return;
    // } else if (index === 0) {
    //   toggleButton[0].checked = true;
    //   toggleButton[1].checked = false;
    //   this.toggleChange(toggleButton[0], '0');
    // } else {
    //   toggleButton[0].checked = false;
    //   toggleButton[1].checked = true;
    //   this.titleBar.hasNew = 0;
    //   this.toggleChange(toggleButton[1], '1');
    // }
  }

}
